<template lang="pug">
.login 登录
  el-form.form(:model="loginForm", label-width="80px")
    el-form-item(label="用户名")
      el-input(v-model="loginForm.username")
    el-form-item(label="密码")
      el-input(v-model="loginForm.password", show-password)
    el-form-item.btn-team
      el-button(@click="register") 注册
      el-button(type="primary", @click="login") 登录
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    register() {
      this.$router.push("/register");
    },
    login() {
      this.loginForm.password = this.$md5(this.loginForm.password)
      this.$http
        .post("/login", this.loginForm)
        .then((res) => {
          if (res) {
            window.localStorage.setItem("token", res.data.token);
            this.$message({
              type: "success",
              message: "登陆成功",
            });
            this.$store.commit("freshToken");
            this.$router.push('/');
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: absolute;
  width: 450px;
  height: 350px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 10px;
  border-radius: 20px;
  border: solid 1px #777;
  box-shadow: 0 0 5px #777;
  .form {
    position: absolute;
    width: 420px;
    top: 50%;
    transform: translateY(-50%);
    .btn-team {
      position: relative;
      right: -90px;
    }
  }
}
</style>